import { Card, Space, Table, Tag, Button } from 'antd';
import { useState, useEffect } from 'react';

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    // text是指这一行信息的name属性值
    render(text: string) {
      return <span style={{ color: 'red' }}>{text}</span>;
    },
  },
  {
    title: '年龄',
    dataIndex: 'age',
  },
  {
    title: '住址',
    dataIndex: 'address',
  },
  {
    title: '爱好',
    dataIndex: 'likes',
    render(text: string[]) {
      // return <span>{text.join(',')}</span>;
      return (
        <>
          {text.map((item) => {
            return (
              <Tag color="magenta" key={item}>
                {item}
              </Tag>
            );
          })}
        </>
      );
    },
  },
  {
    title: '操作',
    // 第二个参数record，表示的是整一条数据
    render(_: any, record: ItemType) {
      return (
        <Space>
          <Button>编辑</Button>
          <Button onClick={() => remove(record)}>删除</Button>
        </Space>
      );
    },
  },
];

const remove = (record: ItemType) => {
  console.log(record);
};

interface ItemType {
  key: string;
  name: string;
  age: number;
  address: string;
  likes: string[];
}

const Index = () => {
  const [dataSource, setDataSource] = useState<ItemType[]>([]);

  useEffect(() => {
    setTimeout(() => {
      setDataSource([
        {
          key: '1',
          name: '胡彦斌',
          age: 32,
          address: '西湖区湖底公园1号',
          likes: ['吃饭', '睡觉'],
        },
        {
          key: '2',
          name: '胡彦祖',
          age: 42,
          address: '西湖区湖底公园1号',
          likes: ['吃饭2', '睡觉2'],
        },
      ]);
    }, 500);
  }, []);

  return (
    <Space direction="vertical" style={{ display: 'flex' }}>
      <Card title="注册表格">
        <Table dataSource={dataSource} columns={columns} />;
      </Card>
    </Space>
  );
};

export default Index;
